<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';

const list = ref([])
const loadData = async () => {
  const res = await axios({ url: '/list' })
  list.value = res.data
}
onMounted(loadData)


const onDel = async (id) => {
  await axios({url: '/del', method: 'delete', params: {id}})
  loadData()
}
</script>

<template>
  <div class="app">
    <el-table :data="list">
      <el-table-column label="ID" prop="id" />
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="籍贯" prop="place" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" link @click="onDel(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style>
.app {
  width: 980px;
  margin: 100px auto 0;
}
</style>